<template>
  <view class="top-progress progress-bar">
    <view v-for="b in bar"
          :key="b.stepNum"
          class="progress-bar-item"
          :class="{'is-active':stepNum>=b.stepNum}">
      <view class="progress-bar-stepNum"
            :class="{'is-active':stepNum>=b.stepNum}">{{b.stepNum}}</view>
      {{b.text}}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    stepNum: {
      type: Number
    }
  },
  data() {
    return {
      bar: [
        {
          stepNum: 1,
          text: "身份信息"
        },
        {
          stepNum: 2,
          text: "企业信息"
        },
        {
          stepNum: 3,
          text: "贷款信息"
        },
        {
          stepNum: 4,
          text: "信息确认"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss">
$--top-bar-height: 0rpx;
.progress-bar {
  padding: 50rpx+$--top-bar-height 85rpx 50rpx;
  display: flex;
  flex-direction: row;
  background: #cc283b;
  .progress-bar-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // 30为左右间距
    width: 150upx+30upx;
    height: 95upx;
    font-size: 26upx;
    font-weight: 400;
    color: #e78c99;
    line-height: 37upx;
    position: relative;

    &::before {
      content: "";
      display: block;
      height: 6upx;
      background: #e78c99;
      position: absolute;
      left: 0;
      right: 0;
      top: 17upx;
    }

    &:first-child {
      &::before {
        left: 50%;
      }
    }
    &:last-child {
      &::before {
        right: 50%;
      }
    }

    &.is-active {
      color: #FFFFFF;
      &::before {
        background: #FFFFFF;
		
      }
    }
  }
  .progress-bar-stepNum {
    position: relative;
    z-index: 2;
    width: 40upx;
    height: 40upx;
    line-height: 40upx;
    text-align: center;
    border-radius: 50%;
    background: #e4929d;
    color: #cc283b;
    font-size: 20upx;
    &.is-active {
      background: #FFFFFF;
      color: #cc283b;
    }
  }
}
</style>
